<template>
    <div class="news-form">
        <el-form ref="form" :model="news" label-width="120px">

            <el-row>
                <el-col :span="12">
                    <el-form-item>
                        <template slot="label"><span style="color: red">*</span>新闻标题</template>
                        <el-input v-model="news.newsTitle" maxlength="64" style="width:500px"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item>
                        <template slot="label"><span style="color: red">*</span>新闻类型</template>
                        <el-select v-model="news.newsType" class="condition-input" style="width:500px">
                            <el-option v-for="item in newsTypeItem" :key="item.value" :label="item.label" :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="12">
                    <el-form-item>
                        <template slot="label"><span style="color: red"></span>排序</template>
                        <el-input v-model="news.sort" maxlength="64" style="width:500px"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>


            <el-row>
                <el-col :span="24">
                    <el-form-item label="新闻内容:">
                        <quill-editor ref="myQuillEditor" v-model="news.newsContent" :options="editorOption" class="officeIntroduce-detail" >
                        </quill-editor>
                        <el-upload v-show="false" ref="upload" class="upload-demo" :action="uploadFilePath" :on-success="editorSubImage":on-error="uploadError"/>
                    </el-form-item>
                </el-col>
            </el-row>

        </el-form>


        <div class="bottom-btn">
                <span slot="footer" class="dialog-footer">
                        <el-button @click="editDataBoxClose">取 消</el-button>
                        <el-button @click="clearDate">清 空</el-button>
                        <el-button type="primary" @click="onEditSubData">保 存 数 据</el-button>
                </span>
        </div>


    </div>
</template>

<script>
    import newsApi from '@/api/news/newsApi'
    export default {
        name: "NewsForm",
        data() {
            return {
                newsTypeItem:[{value:'1',label:'公司新闻'},{value:'2',label:'行业新闻'},{value:'3',label:'其他新闻'}],
                uploadFilePath:process.env.VUE_APP_REQUEST_URL+'/a/core/file/fileUpload',
                editorOption: { // 富文本编辑器配置
                    placeholder: '请在这里输入',
                    modules: {
                        toolbar: {
                            container: [
                                ['bold', 'italic', 'underline', 'strike'], // 加粗，斜体，下划线，删除线
                                // ['blockquote', 'code-block'], // 引用，代码块
                                [{ 'header': 1 }, { 'header': 2 }], // 标题，键值对的形式；1、2表示字体大小
                                [{ 'list': 'ordered' }, { 'list': 'bullet' }], // 列表
                                [{ 'script': 'sub' }, { 'script': 'super' }], // 上下标
                                [{ 'indent': '-1' }, { 'indent': '+1' }], // 缩进
                                [{ 'direction': 'rtl' }], // 文本方向
                                [{ 'size': ['small', false, 'large', 'huge'] }], // 字体大小
                                [{ 'header': [1, 2, 3, 4, 5, 6, false] }], // 几级标题
                                [{ 'color': [] }, { 'background': [] }], // 字体颜色，字体背景颜色
                                [{ 'font': [] }], // 字体
                                [{ 'align': [] }], // 对齐方式
                                ['clean'], // 清除字体样式
                                ['image'] // 上传图片、上传视频
                            ],
                            handlers: {
                                'image': function(value) {
                                    if (value) {
                                        document.querySelector('.news-form .upload-demo input').click()
                                    } else {
                                        this.quill.format('image', false)
                                    }
                                }
                            }
                        }
                    },
                    theme: 'snow'
                },
                news: {
                    id: '',
                    newsTitle: '',
                    newsType: '',
                    newsContent: '',
                    sort: '',
                },
            }
        },
        methods: {
            editorSubImage(res, file){
                const quill = this.$refs.myQuillEditor.quill
                if (res.code === "200" && res.data !== null) {
                    const length = quill.getSelection().index // 获取光标所在位置
                    quill.insertEmbed(length, 'image', res.data) // 插入图片
                    quill.setSelection(length + 1) // 调整光标位置到最后
                } else {
                    this.uploadError();
                }
            },
            uploadError() {
                this.$message.error('上传失败')
            },
            editDataBoxClose() {
                this.$emit('editDataBoxClose', false)
            },
            async onEditSubData() {
                let res = '';
                if (this.news.id != '') {
                    res = await newsApi.updateNews(this.news)
                    if (res.code == '200') {
                        this.$emit('onUpdateSuccess', res.data)
                    } else {
                        this.$message.error(res.msg)
                    }
                } else {
                    res = await newsApi.saveNews(this.news)
                    if (res.code == '200') {
                        this.$emit('onAddSuccess', res.data)
                    } else {
                        this.$message.error(res.msg)
                    }
                }

            },
            clearDate() {
                let news = {
                    newsTitle: '',
                    newsContent: '',
                    sort: '',
                }
                this.news = news
            },
            handleAvatarSuccess(res, file) {
                if (res.code == '200') {
                    this.news.newsImage = res.data;
                } else {
                    this.uploadError();
                }

            },
            uploadError() {
                this.$message.error('上传失败')
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            }
        },
        props: {
            editItemData: {
                require: true
            }
        },
        watch: {
            editItemData: {
                immediate: true,
                handler(newVal, oldVal) {
                    if (newVal != '') {
                        this.news = newVal
                    }
                }
            }
        },
    }
</script>

<style scoped>
    .officeIntroduce-detail{
        height: 600px;
        margin-bottom: 30px;
    }
</style>